<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="list">
        <p id="java">Java</p >
        <p id="python">Python</p >
        <p id="scheme">Scheme</p >
    </div>
    <script>
        // Document Object Model
        // Borrow Object Model
        // 栈先进后出
        // 队列是奉行先进先出
        // 链表，字典

        // 创建节点
        const newDiv = document.createElement('div')
        newDiv.textContent = '这是一个新的 div 元素'
        newDiv.id = "exampleDiv";
        newDiv.className = "exampleClass";
        const list = document.getElementById('list')
        // 添加节点
        list.appendChild(newDiv);
        console.log('list',list)

        // 用insertBefore 添加到指定的地方去
        const referenceNode  =  document.getElementById('python')
        const newParagraph = document.createElement('p')
        newParagraph.textContent = 'pathon 之前'
        list.insertBefore(newParagraph,referenceNode)

        // 删除节点
        const java = document.getElementById('java')
        list.removeChild(java)

        // 更改节点内容
        newDiv.innerHTML = '12344564'
        newDiv.style.color = '#ff0000'
        newDiv.style.fontSize = '20px'



        // 1、BOM 操作
        // window.moveBy(x,y);
        // window.moveTo(x,y);
        // window.resizeBy(w,h); // 调整像素
        // window.resizeTo(w,h); // 调整像素
        // window.scrollTo(w,h); // 
        // window.scrollBy(w,h); //
        // window.open() 
        // window.close() 

        // 2、location

        // const url = 'http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents'
        // console.log('hash',location.hash(url))

        const fullHash = location.hash;
        console.log(fullHash);

        // 3、history

        // history.back()
        // history.length()
        // history.forward()

        // 4、screen

        // 5、navigator
    </script>
</body>
</html>